<template>
  <section class="m-4">
    <el-card>
      <section slot="header" class="flex items-center justify-between">
        <section class="flex items-center">
          <p class="mr-4">用户ID</p>
          <el-input v-model="user_code" class="mr-4" clearable placeholder="请输入用户code"/>
          <el-button type="primary" @click="initData()">搜索</el-button>
        </section>
        <el-button type="success" @click="visible = true">新增</el-button>
      </section>

      <el-table :data="tableData" border class="mx-4" stripe>
        <el-table-column label="记录ID" prop="id"/>
        <el-table-column label="管理员名称" prop="admin_name"/>
        <el-table-column label="封禁用户昵称" prop="nickname"/>
        <el-table-column label="封禁用户ID" prop="user_code"/>
        <el-table-column label="创建时间" prop="created_at"/>
        <el-table-column label="操作">
          <template slot-scope="{row}">

            <el-popconfirm
              cancel-button-text="取消"
              confirm-button-text="删除"
              icon="el-icon-info"
              icon-color="red"
              title="确定删除此条记录吗？"
              @confirm="handleDel(row)"
            >
              <el-button slot="reference" plain type="danger">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>


      <el-pagination
        :page-size="15"
        :total="meta.total"
        background
        class="text-right mt-4"
        layout="prev, pager, next"
        @current-change="initData"
      />
    </el-card>


    <el-dialog
      :close-on-click-modal="false"
      :visible="visible"
      lock-scroll
      title="新增封禁"
      @close="visible = false;user_code = ''"
    >
      <section class="flex items-center">
        <p class="mr-4">用户code</p>
        <el-input v-model="local_user_code" placeholder="请输入用户code"/>
      </section>

      <section slot="footer">
        <el-button type="primary" @click="handleSubmit">提交</el-button>
      </section>
    </el-dialog>

  </section>
</template>

<script>
import { delWithDrawBlock, toWithDrawBlock, withDrawBlock } from '@/api/ban'

export default {
  name: 'revenueConversionBan',
  data() {
    return {
      user_code: '',
      local_user_code: '',
      visible: false,
      tableData: [],
      meta: {
        page: 1,
        total: 0
      }
    }
  },
  created() {
    this.initData()
  },
  methods: {
    async initData(page = 1) {
      try {
        const { data: { list, meta } } = await withDrawBlock(this.user_code, page)
        this.tableData = list
        this.meta.page = meta.page
        this.meta.total = meta.total
      } catch (e) {

      }
    },

    async handleDel(row) {
      const { id } = row
      const { code } = await delWithDrawBlock(id)
      if (code === 200) {
        this.$message.info('操作成功')
        await this.initData()
      }
    },

    /* 提交 */
    async handleSubmit() {
      if (this.local_user_code.trim() === '') {
        return this.$message.warning('请输入 用户 code')
      }
      const { code, message } = await toWithDrawBlock(this.local_user_code)
      if (code === 200) {
        this.$message.success('添加成功')
        this.visible = false
        this.local_user_code = ''
        await this.initData()
      } else {
        this.$message.error(message || '添加失败')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-input {
  width : 200px;
}
</style>
